﻿// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*='col-'] {
        padding-right: 0;
        padding-left: 0;
    }
}

@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @if $columns > 0 {
                @for $i from 1 through $columns {
                    .g-col#{$infix}-#{$i} {
                        grid-column: auto / span $i;
                    }
                }
            }
        }
    }
}

.grid {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    gap: #{$grid-gutter-width};

    @each $breakpoint in map-keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            @if $grid-columns > 0 {
                @for $i from 1 through $grid-rows {
                    &.g-rows#{$infix}-#{$i} {
                        grid-template-rows: repeat($i,minmax(0,1fr));
                    }
                }

                @for $i from 1 through $grid-columns {
                    &.g-cols#{$infix}-#{$i} {
                        grid-template-columns: repeat($i,minmax(0,1fr));
                    }
                }
            }
        }
    }

    @include make-cssgrid();
}

// only generate xxl that is not available in native Bootstrap 4
@include make-grid-columns($grid-columns, $grid-gutter-width, ( xxl: 1400px ));